<template>
  <div class="caseRate">
    <Tabs type="card" v-model="showTab" :animated="false" @on-click="tabClickFun">
      <TabPane label="营销执行" name="1"></TabPane>
      <TabPane label="客户管理" name="2"></TabPane>
      <TabPane label="内容策划" name="3"></TabPane>
      <TabPane label="案场管理" name="4"></TabPane>
    </Tabs>
    <div style="text-align: right"><Button type="primary" @click="rateRelease">发布</Button></div>
    <rate-config ref="rate" @updateAll="updateAll"></rate-config>
  </div>
</template>
<script setup>
  import caseRateMgr from '@/biz/caseRate/caseRate'
  import rateConfig from './component/rateConfig.vue'
  import { Message, Modal } from 'view-design'
  import { ref, onMounted } from 'vue'
  const showTab = ref('1')
  const listData = ref({})
  const rate = ref(null)
  const tabData = ref({
    1: 'marketingExecution',
    2: 'customerManage',
    3: 'contentPlanning',
    4: 'buildingManage'
  })
  function configList() {
    let params = {}
    caseRateMgr.configList(params).then((res) => {
      listData.value = res
      const selectedTabData = listData.value[tabData.value[showTab.value]]
      if (selectedTabData) {
        rate.value.show(selectedTabData)
      }
    })
  }
  onMounted(() => {
    configList()
  })
  function updateAll() {
    configList()
  }
  function tabClickFun(val) {
    const selectedTabData = listData.value[tabData.value[showTab.value]]
    if (selectedTabData) {
      rate.value.show(selectedTabData)
    }
  }
  function rateRelease() {
    Modal.confirm({
      title: '发布',
      content: `发布生效后，当月案场评级将会以此标准执行，是否确认发布？`,
      okText: '确认',
      closable: true,
      onOk: () => {
        let params = {}
        caseRateMgr.releaseTakeEffect(params).then((res) => {
          Message.success('发布成功')
        })
      }
    })
  }
</script>
<style lang="scss" scoped>
  .caseRate {
    padding: 20px;

    .detail_title {
      margin-bottom: 20px;

      .search_btn {
        margin-left: 20px;
      }
    }
  }
</style>

<!-- <template>
  <div class="caseRate">
    <Tabs type="card" v-model="showTab" :animated="false" @on-click="tabClickFun">
      <TabPane label="营销执行" name="1"></TabPane>
      <TabPane label="客户管理" name="2"></TabPane>
      <TabPane label="内容策划" name="3"></TabPane>
      <TabPane label="案场管理" name="4"></TabPane>
    </Tabs>
    <div style="text-align: right"><Button type="primary" @click="rateRelease">发布</Button></div>
    <rate-config ref="rate" @updateAll="updateAll"></rate-config>
  </div>
</template>

<script>
  import caseRateMgr from '@/biz/caseRate/caseRate'
  import rateConfig from './component/rateConfig.vue'
  export default {
    components: {
      rateConfig
    },
    data() {
      return {
        showTab: '1',
        listData: {},
        tabData: {
          1: 'marketingExecution',
          2: 'customerManage',
          3: 'contentPlanning',
          4: 'buildingManage'
        }
      }
    },
    created() {
      this.configList()
    },
    mounted() {},

    methods: {
      rateRelease() {
        this.$Modal.confirm({
          title: '发布',
          content: `发布生效后，当月案场评级将会以此标准执行，是否确认发布？`,
          okText: '确认',
          closable: true,
          onOk: () => {
            let params = {}
            caseRateMgr.releaseTakeEffect(params).then((res) => {
              this.$Message.success('发布成功')
            })
          }
        })
      },
      updateAll() {
        this.configList()
      },
      tabClickFun(val) {
        const selectedTabData = this.listData[this.tabData[this.showTab]]
        if (selectedTabData) {
          this.$refs.rate.show(selectedTabData)
        }
      },
      configList() {
        let params = {}
        caseRateMgr.configList(params).then((res) => {
          this.listData = res
          const selectedTabData = this.listData[this.tabData[this.showTab]]
          if (selectedTabData) {
            this.$refs.rate.show(selectedTabData)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .caseRate {
    padding: 20px;

    .detail_title {
      margin-bottom: 20px;

      .search_btn {
        margin-left: 20px;
      }
    }
  }
</style> -->
